<template>
  <div>
    <el-dialog v-model="props.popup" :title="title" width="50%" :before-close="handleClose">
      <!-- 内容 -->

      <div class="top">
        <!-- 部门 -->
        <span>部门：</span>
        <div style="margin-right: 20px;">
          <el-select class="m-2" v-model="departmentValue" placeholder="请选择部门" @change="depChange">
            <el-option v-for="item in department" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </div>

      <!-- 穿梭框 -->
      <div style="margin-top:30px; margin-left: 50px;">
        <el-transfer v-model="id" :left-default-checked="id" @left-check-change="leftcheckChange"
          @right-check-change="rightcheckChange" :titles="['未选', '已选']" :props="{key: 'id',label: 'name',}" :data="datas">
          <template #default="{ option }">
            <span>{{ option.name }}</span>
          </template>
        </el-transfer>
      </div>


      <!-- dialog功能 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel2">取消</el-button>
          <el-button type="primary" @click="confirm2">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  toRefs,
  onMounted,
  onUpdated,
  onUnmounted,
  reactive,
  watchEffect,
} from 'vue';
import { department_list,teacher_list } from "../../api/test";


const props = defineProps(['popup', 'params']); //父传子
const emit = defineEmits(['handleClose', 'confirm2', 'cancel2']); //子传父 

const handleClose = () => {
  emit('handleClose', false);
};



// 标题
let title = ref('可见老师')


//  部门 穿梭框 《联动》

// 部门
let departmentValue = ref('') //当前选中的
let department:any = ref([])  //赋值的、

let getdepartment = async() => {
  let res:any = await department_list ({page:1,psize:100})
  department.value = res.data.list
}
getdepartment()


// 点击部门 获取id  因为穿梭框要部门的id
let depid = ref(0)
let depChange = (val:any) => {
  depid.value = val
  getstudent()
}



// 穿梭框 数据------------------------------------
let datas = ref([])

let getstudent = async() => {
  let res = await teacher_list({page:1,psize:100,depid:depid.value})
  console.log(res);
  datas.value = res.data.list
}
getstudent()

// 穿梭框 已选 未选
let id:any = ref([])
const leftcheckChange = (val: any) => {   //已选
    id.value = [...id.value, ...val]
}
const rightcheckChange = (val: any) => {   //未选
    if (val.length > 0) {
        id.value = id.value.filter((item: any) => item != val[0])
    }
}

// 确定按钮
let markteachers = ref([]) // id

const confirm2 = () => {
  markteachers.value = id.value.map((item: any) => ({ id: item })) //数据

  emit('confirm2', false,markteachers.value); //把数据传给父亲
};
// 取消按钮
const cancel2 = () => {
  emit('cancel2', false);
};



</script>
<style lang="less" scoped>
.top{
  display: flex;
  align-items: center;
}
:deep(.el-transfer__buttons) {
  display: none;
}

:deep(.el-transfer) {
  --el-transfer-panel-width: 264px;
  display: flex;
}

:deep(.el-transfer-panel) {
  margin-right: 30px;
  // margin-left: 4px;
}
</style>
